<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        //1.箭头函数与function定义函数的写法：
        function fn(a, b) {
            return a + b;
        }
        //arrow function
        var foo = (a, b) => { return a + b };
        //↓↓↓↓↓↓再简洁写法↓↓↓↓↓↓↓↓
        var foo = (a,b) =>(a+b)



        //2.this的指向：
        //使用function定义的函数，this的指向随着调用环境的变化而变化的，而箭头函数中的this指向是固定不变的，一直指向的是定义函数的环境
        //使用function定义的函数中this指向是随着调用环境的变化而变化的
        function foo() {
            console.log(this);
        }
        var obj = { aa: foo };
        foo(); //Window
        obj.aa() //obj { aa: foo }
        //使用箭头函数定义函数
        var foo = () => { console.log(this) };
        var obj = { aa: foo };
        foo(); //Window
        obj.aa(); //Window


        //3.构造函数
        //使用function方法定义构造函数
        function Person(name, age) {
            this.name = name;
            this.age = age;
        }
        var lenhart = new Person('lenhart', 25);
        console.log(lenhart); //{name: 'lenhart', age: 25}
        //尝试使用箭头函数
        //function是可以定义构造函数的，而箭头函数是不行的。
        var Person = (name, age) => {
            this.name = name;
            this.age = age;
        };
        var lenhart = new Person('lenhart', 25); //Uncaught TypeError: Person is not a constructor


        //4.变量提升
        //由于js的内存机制，function的级别最高，而用箭头函数定义函数的时候，需要var(let const定义的时候更不必说)关键词，而var所定义的变量不能得到变量提升，故箭头函数一定要定义于调用之前！
        foo(); //123
        function foo() {
            console.log('123');
        }

        arrowFn(); //Uncaught TypeError: arrowFn is not a function
        var arrowFn = () => {
            console.log('456');
        };

    </script>
</body>

</html>